<template>
	<view class="uwo-collapse">
		<view class="uwo-collapse-head" @click="headClick">
			<view class="uwo-collapse-head-title">
				<slot name="title">内容</slot>
			</view>
			<view class="uwo-collapse-head-icon">
				<uni-icons v-show="height === 'auto'" type="arrowdown" size="20"></uni-icons>
				<uni-icons v-show="height !== 'auto'" type="arrowup" size="20"></uni-icons>
			</view>
		</view>
		<view
			class="uwo-collapse-body"
			:style="{
				height: height
			}"
		>
			<slot>内容</slot>
		</view>
	</view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const props = defineProps({
	/*不默认展开*/
	expanding: {
		type: Boolean,
		default: false
	}
});
const height = ref('0px');

const headClick = () => {
	if (height.value === '0rpx') {
		height.value = 'auto';
	} else {
		height.value = '0rpx';
	}
};

onMounted(() => {
	height.value = props.expanding ? 'auto' : '0rpx';
});
</script>

<style scoped lang="scss">
.uwo-collapse {
	margin: 30rpx 0;

	.uwo-collapse-head {
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;

		// height: 50rpx;
		.uwo-collapse-head-title {
			flex: 1;
		}
	}

	.uwo-collapse-body {
		width: 100%;
		overflow: hidden;
	}
}
</style>
